import React, { FC } from 'react'
import { Card, Row, Col } from 'antd';
import { PlayCircleOutlined, ClockCircleOutlined, UserOutlined } from '@ant-design/icons';

const { Meta } = Card;

interface Props {

}


const MetaTitle: FC = () => {
    return <>
        <div className='card-title'>
            <Row gutter={10}>
                <Col span={12}>
                    <PlayCircleOutlined /> 121313
                </Col>
                <Col span={12}>
                    <ClockCircleOutlined /> 2022-01-09
                </Col>
            </Row>
        </div>
    </>
}

const User: FC = () => {
    return <>
        <UserOutlined /> 张三
    </>
}

const Cover: FC = () => {
    return <img className='card-cover' src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
}

const SearchCard: FC = (props: Props) => {
    return (
        <div className='search-card'>
            <Row gutter={[20, 20]}>
                <Col xs={12} sm={12} md={8} lg={8} xl={6} xxl={4}>
                    <Card
                        hoverable
                        cover={<Cover />}
                    >
                        <Meta title={<MetaTitle />} description={<User />} />
                    </Card>
                </Col>
                <Col xs={12} sm={12} md={8} lg={8} xl={6} xxl={4}>
                    <Card
                        hoverable
                        cover={<Cover />}
                    >
                        <Meta title={<MetaTitle />} description={<User />} />
                    </Card>
                </Col>
                <Col xs={12} sm={12} md={8} lg={8} xl={6} xxl={4}>
                    <Card
                        hoverable
                        cover={<Cover />}
                    >
                        <Meta title={<MetaTitle />} description={<User />} />
                    </Card>
                </Col>
                <Col xs={12} sm={12} md={8} lg={8} xl={6} xxl={4}>
                    <Card
                        hoverable
                        cover={<Cover />}
                    >
                        <Meta title={<MetaTitle />} description={<User />} />
                    </Card>
                </Col>
            </Row>
        </div>
    )
}

export default SearchCard;
